<template>
  <!-- 个人中心页面 -->
  <view class="main">
    <view style="height: 2rpx; background-color: #eeeeee"></view>
    <view class="content">
      <view class="head">
        <view class="img">
          <image
            :src="
              cardData.avatarUrl
                ? cardData.avatarUrl
                : '../../imges/head_kong.png'
            "
            mode="aspectFill"
            @tap="toCard"
          ></image>
        </view>
        <view class="right">
          <text class="name">{{ cardData.realName }}</text>
          <view class="text">
            {{ cardData.company }}
            <text
              v-if="cardData.company && cardData.post"
              style="margin: 0 10rpx"
            >
              |
            </text>
            {{ cardData.post }}
          </view>
        </view>
      </view>
      <navigator
        url="/pages/per_center/realName"
        hover-class="none"
        class="shiming"
      >
        <view class="rukou">
          <text>实名信息</text>
          <image src="../../imges/you3.png" mode="aspectFill"></image>
        </view>
      </navigator>
      <view class="nav">
        <view class="card" @tap="toCard">
          <text>我的名片</text>
          <view>
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </view>
        <navigator url="/pages/index/manage" hover-class="none" class="circle">
          <text>我的圈子</text>
          <view>
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </navigator>
        <navigator
          :url="'/pages/per_center/wallet?yue=' + cardData.balance"
          hover-class="none"
          class="balance"
        >
          <text>我的余额</text>
          <view class="num">
            <text>￥ {{ cardData.balance ? cardData.balance : 0 }}</text>
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </navigator>
        <navigator
          url="/pages/per_center/release"
          hover-class="none"
          class="release"
        >
          <text>我的发布</text>
          <view>
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </navigator>
        <navigator
          :url="'/pages/per_center/collection?id=' + cardData.id"
          hover-class="none"
          class="collection"
        >
          <text>我的收藏</text>
          <view>
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </navigator>
        <navigator
          url="/pages/per_center/socialNews"
          hover-class="none"
          class="collection"
        >
          <text>社交消息</text>
          <view>
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </navigator>
        <navigator
          url="/pages/webGoods/myOrder"
          hover-class="none"
          class="collection"
        >
          <text>我的订单</text>
          <view>
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </navigator>
        <view
          class="wxOpenInAPP"
          v-if="openApp.iswx == 'wx' && openApp.phone == 'Android'"
        >
          <view class="text_go">
            <wx-open-launch-app
              id="launch-btn"
              appid="wx8737e94836340f56"
              @error="openApp.handleErrorFn"
              @launch="openApp.handleLaunchFn"
              :extinfo="extinfoid"
            >
              <script type="text/wxtag-template">
                        <style>
                          .btn {
                   	      color: #424242;
                            font-size: 14px;
                            display: inline-block;
                width: 260px;
                          }
                        </style>
                        <view class="btn">我的商品</view>
              </script>
            </wx-open-launch-app>
          </view>
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </view>
        <view class="collection" @tap="handleApp" v-if="openApp.phone == 'ios'">
          <text>我的商品</text>
          <view>
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </view>
        <navigator
          url="/pages/webGoods/receiverAddress"
          hover-class="none"
          class="collection"
        >
          <text>收货地址</text>
          <view>
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </navigator>
        <navigator
          url="/pages/per_center/distrCommission"
          hover-class="none"
          class="collection"
        >
          <text>推广佣金</text>
          <view>
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </navigator>
        <navigator
          url="/pages/per_center/feedback"
          hover-class="none"
          class="feedback"
        >
          <text>意见反馈</text>
          <view>
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </navigator>
      </view>
      <navigator url="/pages/index/index" hover-class="none" class="explore">
        探索圈子
      </navigator>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
let jweixin = require("jweixin-module"); //引入配置
import "../../utils/toApp.js";
export default {
  data() {
    return {
      cardData: {},
      id: "",
      extinfoid: "", //安卓分享的链接
    };
  },
  onShow() {
    this.card();
    this.configWeiXin();
  },
  onLoad() {
    this.card();
    this.huoquId();
  },
  methods: {
    configWeiXin() {
      //获取公众号配置
      request({
        //获取appid
        url: "wechat/portal/jsapiSignature/",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7,
        },
        data: {
          url: window.location.href.split("#")[0], //后台通过域名进行授权
        },
      }).then((res) => {
        if (res.statusCode == 200) {
          //获取成功
          jweixin.config({
            debug: false, // 开启调试模式，发布的时候改为false
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"], // 必填，需要使用的JS接口列表
            openTagList: ["wx-open-launch-app"],
          });
          jweixin.ready(function () {});
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });

      if (this.openApp.iswx == "wx" && this.openApp.phone == "Android") {
        this.extinfoid = `yqlw://yilaiwang.com/openDetail?jumpType=18&serviceId=''&type=1&orgId=''&content=''`;
      }
    },
    handleApp() {
      uni.showModal({
        title: "前往APP",
        content: "即将离开微信，打开“一起来往”查看我的商品列表",
        confirmText: "允许",
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: "加载中，请稍等~",
            });
            setTimeout(function () {
              uni.hideLoading();
            }, 3000);
            var url = window.location.href.split("&code")[0];
            window.history.pushState({}, 0, url);
            this.openApp.toApps(18, "", 1, "", "");
          }
        },
      });
      // uni.showToast({
      // 	title: "需跳转APP，暂未上线",
      // 	duration: 2000,
      // 	icon: "none",
      // });
    },
    toCard() {
      uni.navigateTo({
        url: "/pages/index/personal?id=" + this.id + "&type=1",
      });
    },
    card() {
      let token = uni.getStorageSync("token");
      const that = this;
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/homePage/myHomePage?uid=fdd1ab0f760d11e99d3100163e05ff66",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          if (res.data.code == 200) {
            that.cardData = res.data.data;
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    huoquId() {
      let token = uni.getStorageSync("token");
      const that = this;
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/user/getNewOtherBusinessCard?",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            viewUid: "",
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.id = res.data.data.id;
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.content {
  padding: 0 28rpx;
}

.head {
  display: flex;
  align-items: center;
  padding-top: 35rpx;

  .img {
    width: 130rpx;
    height: 130rpx;
    // border-radius: 50%;

    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .right {
    margin-left: 20rpx;

    .name {
      font-size: 32rpx;
      font-family: PingFangSC-Regular;
      font-weight: bold;
      color: #333333;
    }

    .text {
      display: flex;
      font-size: 24rpx;
      font-family: PingFangSC-Regular;
      color: #9e9e9e;
    }
  }
}

.shiming {
  width: 692rpx;
  height: 178rpx;
  background: url(../../imges/shiming.png) no-repeat;
  background-size: 100% 100%;
  position: relative;

  .rukou {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 42rpx;
    left: 28rpx;
    font-size: 26rpx;
    color: #ffffff;

    image {
      width: 20rpx;
      height: 20rpx;
      margin-left: 20rpx;
    }
  }
}

.nav {
  width: 692rpx;
  margin-top: 20rpx;
  padding: 0 25rpx;
  margin-bottom: 68rpx;
  box-sizing: border-box;
  box-shadow: 5rpx 0 3rpx 3rpx #f7f5f5, -5rpx 0 8rpx 3rpx #f7f5f5;

  .wxOpenInAPP {
    width: 100%;
    position: relative;
    height: 40rpx;
    padding: 25rpx 0;
    font-size: 14px;
    border-bottom: 1rpx solid #f7f5f5;
    color: #424242;
    display: flex;
    justify-content: space-between;
    .text_go {
      width: 500rpx;
      color: #424242;
      font-size: 28rpx;
    }

    image {
      flex-shrink: 0;
      width: 26rpx;
      height: 32rpx;
    }
  }

  .card,
  .circle,
  .balance,
  .release,
  .collection,
  .feedback {
    width: 100%;
    height: 40rpx;
    padding: 25rpx 0;
    font-size: 14px;
    border-bottom: 1rpx solid #f7f5f5;
    color: #424242;
    display: flex;
    justify-content: space-between;

    image {
      width: 26rpx;
      height: 32rpx;
    }

    .num {
      display: flex;
      align-items: center;

      text {
        font-family: DIN Alternate Bold;
        font-weight: bold;
        margin-right: 38rpx;
      }
    }
  }

  .feedback {
    border-bottom: none;
  }
}

.explore {
  width: 400rpx;
  height: 74rpx;
  line-height: 74rpx;
  text-align: center;
  margin: 0 auto;
  border-radius: 37rpx;
  color: #ffffff;
  background-color: #2168eb;
  font-size: 26rpx;
  margin-bottom: 20rpx;
}
</style>
